
import EditMaterial from "../../../";
import React from "react";
import * as THREE from "three";
import SelectImage from "components/SelectImage";
import { MeshPhongMaterial } from "three";
import useVisible from "utils/hooks/useVisible";
import { Button } from "antd";

export default function VisibleItem() {

    const controller = EditMaterial.useController();

    const material = controller.useMemo(s => s.material as MeshPhongMaterial, []);

    const { visible, onClose, onOpen } = useVisible()

    const onSelect = React.useCallback((url: string) => {
        material.map = new THREE.TextureLoader().load(url);
        material.map.wrapS = THREE.RepeatWrapping;
        material.map.wrapT = THREE.RepeatWrapping;
        controller.onChange(material);
    }, [controller, material])

    return (
        <>
            <Button size="small" onClick={onOpen} type="primary" >选择</Button>
            <SelectImage
                visible={visible}
                onClose={onClose}
                onSelect={onSelect}
            />
        </>
    )
}